<template>
  <div>
    <div class="container-fluid pt-2">
      <breadcrumb :links="links"/>
      <i class="zi zi_user"></i>
      
      <hr>
      <paginator :total="total" :pageSize="pageSize" :initPage="initPage" @togglePage="togglePage"/>
      
      <hr>
      <my-table :cols="cols" :data="data" border=""/>
      
      <hr>
      <screening :screenings="maps" :callBackFunction="cbf"/>
      
      <hr>
      <my-form :formData="formData.data" :cbf="formData.cbf"/>
      
      <hr>
      <form class="form-inline ">
        
        <div class="form-group">
          <label>推广链接：</label>
          <input type="text" readonly class=" w-100" v-model="clipboardData" title="">
        </div>
        <button type="button" class="btn btn-success btn-sm " id="clipboard">复制到剪切板</button>
      
      </form>
    
    </div>
  </div>
</template>

<script>
  
  // 表格
  import MyTable from '@/components/public/admin/table'
  // 分页
  import paginator from '@/components/public/admin/paginator'
  // 面包屑
  import breadcrumb from '@/components/public/admin/breadcrumb'
  // 筛选器
  import screening from '@/components/public/admin/screening'
  // 表单
  import MyForm from '@/components/public/admin/form'
  // 剪切板
  import ClipboardJS from 'clipboard'
  
  export default {
    data() {
      return {
        // 剪切板
        clipboardData: 'https://www.baidu.com/',
        clipboard: null,
        
        // breadcrumb
        links: [
          {
            routePath: "",
            title: "企业管理",
          }, {
            routePath: "/admin/111",
            title: "会员列表",
          },
        ],
        
        // paginator
        total: 2000,  //总记录数
        initPage: 1, //初始页,默认值为1
        pageSize: [5,10,20,30,50], //每页显示个数选择器的选项设置,默认值为[20]
        
        // table
        cols: [
          {
            title: "编号",
            key: "id",
            className: "bg-primary",
            align: "center",
          }, {
            title: "姓名",
            key: "name",
          }, {
            title: "年龄",
            key: "age",
            map: {
              "undefined": "未知",
              "15": "十五",
            },
          }, {
            title: "操作",
            key: " action",
            align: "right",
            diy: [
              {
                title: "修改",
                type: "a",
                cbfpMapColKey: "id",
                fn: (id) => {
                  alert(id);
                },
              }, {
                title: "删除",
                cbfpMapColKey: "name",
                fn: (id) => {
                  alert(id);
                },
              },
            ],
          },
        ],
        data: [
          {
            id: 1,
            
            image: '/admin/broadcast/imgapi/42',
            className: "bg-warning",
            
            classNameCell: {
              name: "bg-danger",
              age: "bg-info",
            }
          }, {
            id: 2,
            name: "李四",
            age: 15,
            classNameCell: {
              name: "bg-danger",
              age: "bg-info",
            }
          },
        ],
        
        // 日期控件
        test: "",
        
        // screening
        maps: [
          {
            label: "性别",
            name: "sex",
            type: "select",
            options: [
              {
                value: "1",
                title: "男",
                // selected: true,
              },
              {
                value: "2",
                title: "女",
                // selected: true,
              },
            ],
            // remark: "性别很重要",
          },
          {
            label: "年龄",
            name: "age",
            type: "input",
            value: 12,
            // remark: "年龄也很重要",
          },
        ],
        /**
         * 筛选器的回调函数
         * @param maps
         */
        cbf: function (maps) {
          dump(maps);
        },
        
        // form
        formData: {
          data: [
            {
              name: "name", // 键名
              title: "姓名", //标题（可选）
              type: "text", //类型，与 input 等一致
              value: "张三111", //默认值
              placeholder: "请输入",
              readOnly: false,
              disabled: false,
              remark: "你的名字对本平台而言很重要", //说明
            }, {
              name: "pwd",
              title: "密码",
              type: "password",
              value: "123456",
              readOnly: false,
              disabled: false,
              remark: "",
            }, {
              name: "info",
              title: "简介",
              type: "textarea",
              value: "这是个介绍",
              readOnly: false,
              disabled: false,
              remark: "",
            }, {
              name: "kemu",
              // title: "简介",
              type: "checkbox",
              values: [
                {title: "科目一", value: "km1"},
                {title: "科目二", value: "km2"},
              ], //要显示的
              value: ["km1", "km2"], //实际的值（选中哪些）
              readOnly: false,
              disabled: false,
              remark: "111",
            }, {
              name: "shengfen",
              title: "省份",
              type: "select",
              options: [
                {title: "山东", value: "shandong"},
                {title: "上海", value: "shanghai"},
              ],
              value: "shanghai",
              readOnly: false,
              disabled: false,
              remark: "222",
            }, {
              type: "radio",
              values: [
                {title: "nan", value: 1},
                {title: "nv", value: 2},
                {title: "taijian", value: 3},
              ],
              value: 1,
              name: "sex",
              title: "性别",
              readOnly: false,
              disabled: false,
              remark: "",
            },
          ],
          cbf: function (data) {
            dump(data)
          }
        },
        
        
        ueditorContent: '<h2>Vue + UEditor + v-model双向绑定</h2>',
        ueditorConfig: {
          UEDITOR_HOME_URL: '/static/assets/ueditor/',
          serverUrl: apis + "/admin/common/ueditor",
          initialFrameWidth: "100%",
          initialFrameHeight: "100%",
          maximumWords: 100000,
          imageUrlPrefix: apis,
        }
      };
    },
    components: { MyTable, paginator, breadcrumb, screening, MyForm},
    methods: {
      togglePage(indexPage) {
        //打印出当前页数
        console.log(indexPage);
      },
      ueditorReady(editorInstance) {
        console.log(`编辑器实例${editorInstance.key}: `, editorInstance)
      }
    },
    watch: {
    },
    mounted() {
      
      let $this = this;
      
      //剪切板
      this.clipboard = new ClipboardJS('#clipboard', {
        text: function (trigger) {
          $this.clipboardData = "321123";
          
          return $this.clipboardData;
        }
      });
      //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
      this.clipboard.on('success', function (e) {
        dump('复制成功!');
        e.clearSelection();
      });
      this.clipboard.on('error', function (e) {
        layer.alert('请选择“拷贝”进行复制!');
      });
    },
    beforeDestroy() {
      // this.clipboard.destroy();
    }
  }
</script>

<style scoped>
  
  hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-top: 1px solid rgba(255, 0, 0, 1);
  }
</style>
